<template>
	<view class="confirm-order">
		<block v-if="goods!=''">
			<view class="inner">
				<view class="confirm-order-goods">
					<view class="confirm-order-goods-logo">
						<image :src="goods.store_logo" style="width: 48rpx;height: 48rpx;" />
						<text>{{goods.store_name}}</text>
					</view>
					<view class="confirm-order-goods-items">
						<view class="confirm-order-goods-item">
							<image :src="goods.goods_img" class="goods-img"></image>
							<view class="right">
								<view class="goods-name">{{goods.goods_name}}</view>
								<view class="confirm-number">
									<view class="goods-price">
										<text>¥</text>
										<text class="large">{{goods.goods_price}}</text>
										<text class="last">元/{{goods.unit}}</text>
									</view>
									<view class="number">
										<text :class="{'dis':form.goods_num<=1}" @click="addAndSubtract(-1)">-</text>
										<text>{{form.goods_num}}</text>
										<text :class="{'dis':form.goods_num>=goods.store_count}"
											@click="addAndSubtract(1)">+</text>
									</view>
								</view>
							</view>
						</view>
					</view>
					<!-- <view class="confirm-order-goods-number">
						<view class="left">数量</view>
						<view class="right">
							<text :class="{'dis':form.goods_num<=1}" @click="addAndSubtract(-1)">-</text>
							<text>{{form.goods_num}}</text>
							<text :class="{'dis':form.goods_num>=goods.store_count}" @click="addAndSubtract(1)">+</text>
						</view>
					</view> -->
					<view class="confirm-order-goods-desc" v-if="goods.goods_remark!='' && goods.goods_remark!=null">
						<view class="tit">认养简介</view>
						<view class="jianjie">{{goods.goods_name}}</view>
					</view>
				</view>
				<view class="goods-row">
					<view class="goods-row-tit">备注</view>
					<u-input border="none" class="body_phone_input" placeholder="请填写备注信息(选填)"
						placeholderClass="input-placeholder" type="text" fontSize="26rpx" clearable
						v-model="form.user_note">
					</u-input>
					<view style="height: 20rpx;"></view>
				</view>
				<view class="goods-row" v-if="false">
					<view class="goods-row-tit">交易密码</view>
					<u-input border="none" class="body_phone_input" placeholder="请填写交易密码"
						placeholderClass="input-placeholder" type="password" fontSize="26rpx" clearable
						v-model="form.paypwd">
					</u-input>
					<view style="height: 20rpx;"></view>
				</view>
				<view class="goods-row">
					<view class="goods-row-tit">请选择支付方式</view>
					<view class="pay-items">
						<view @tap="changePay(item.code)" class="pay-item" v-for="(item,index) in pay_list"
							:key="index">
							<image mode="widthFix"
								:src="`https://farm-city.oss-cn-hangzhou.aliyuncs.com/static/order/zf-${item.code}.png`"
								class="pay-item-left-img" />
							<text>{{item.name}}</text>
							<image mode="widthFix"
								:src="form.pay_code==item.code?'https://farm-city.oss-cn-hangzhou.aliyuncs.com/static/common/checkbox-sel.png':'https://farm-city.oss-cn-hangzhou.aliyuncs.com/static/common/checkbox.png'"
								class="pay-item-img" />
						</view>
					</view>
				</view>
				<!-- <view class="xieyi">
					<image @click="xieyi=!xieyi"
						:src="xieyi?'https://farm-city.oss-cn-hangzhou.aliyuncs.com/static/common/checkbox-sel.png':'https://farm-city.oss-cn-hangzhou.aliyuncs.com/static/common/checkbox.png'"
						mode="widthFix" />
					<view class="xieyi-info" @click="goXieyi(form.goods_id,0)">
						<text>购买代表您已同意</text>
						<text>《认养协议》</text>
					</view>
				</view> -->
				<view style="height: 120rpx;"></view>
			</view>
			<view class="confirm-order-bot">
				<view class="">
					<view class="left">
						<text>合计:</text>
						<text class="amount">{{amount}}</text>
						<text>元</text>
					</view>
					<view class="xieyi">
						<image @click="xieyi=!xieyi"
							:src="xieyi?'https://farm-city.oss-cn-hangzhou.aliyuncs.com/static/common/checkbox-sel.png':'https://farm-city.oss-cn-hangzhou.aliyuncs.com/static/common/checkbox.png'"
							mode="widthFix" />
						<view class="xieyi-info" @click="goXieyi(form.goods_id,0)">
							<text>购买代表您已同意</text>
							<text>《认养协议》</text>
						</view>
					</view>
				</view>
				<button type="default" class="zf-btn" @click="tijiao()" :disabled="btnDisabled">立即支付</button>
			</view>
		</block>
		<!-- <u-popup :show="showPaypwd" mode="center" :customStyle="{'width':'80%'}" round="5" :closeOnClickOverlay="false"
			:overlayOpacity="0.6">
			<view class="paypwd-container">
				<image src="https://farm-city.oss-cn-hangzhou.aliyuncs.com/static/common/close.png" mode="widthFix"
					class="close-img" @click="showPaypwd=false">
				</image>
				<view class="title">交易密码</view>
				<view class="form-rows">
					<u-input border="none" class="row-input" placeholder="请填写交易密码" placeholderClass="input-placeholder"
						type="password" fontSize="26rpx" clearable v-model="form.paypwd">
					</u-input>
				</view>
				<view class="btn-container">
					<button class="con-btn" @click="queding" :disabled="btnDisabled">确认</button>
				</view>
			</view>
		</u-popup> -->
		<payKeyboard v-if="showPaypwd" title="安全键盘" @success="enterSuccess" @close="showPaypwd=false"></payKeyboard>
	</view>
</template>

<script>
	import {
		payment
	} from "../../common/helper";
	import payKeyboard from '@/components/mi-payKeyboard/mi-payKeyboard.vue'
	var validate = require("@/components/validate/validate.js");
	var _this;
	export default {
		components: {
			payKeyboard
		},
		data() {
			return {
				form: {
					step: 1,
					goods_id: 0,
					goods_num: 1,
					user_note: '',
					pay_code: '',
					paypwd: '',
				},
				showPaypwd: false,
				btnDisabled: false,
				show: false,
				xieyi: false,
				goods: '',
				pay_list: [],
				user_money: 0,
			};
		},
		methods: {
			//跳转到协议详情页面 作废
			to_xieyi() {
				this.$u.route({
					url: '/pages/index/html-detail',
					params: {
						title: '认养协议',
						url: encodeURIComponent('/api/xieyi_xq?id=2')
					}
				})
			},
			addAndSubtract(num) {
				if (num < 0) {
					if (_this.form.goods_num + num < 1) {
						return
					}
					--_this.form.goods_num
				} else {
					if (_this.form.goods_num + num > _this.goods.store_count) {
						return
					}
					++_this.form.goods_num
				}
			},
			//切换支付方式
			changePay(code) {
				if (this.form.pay_code == code) {
					return;
				}
				this.form.pay_code = code
			},
			tijiao() {
				if (!_this.xieyi) {
					uni.$u.toast('请阅读并同意认养协议')
					return
				}
				if (_this.showMima) {
					_this.showPaypwd = true
				} else {
					_this.form.step = 2
					_this.get_confirm()
				}
			},
			enterSuccess(val) {
				console.log(val, '121212');
				this.form.paypwd = val
				_this.form.step = 2
				_this.get_confirm()
			},
			queding() {
				let rule = [{
					name: 'paypwd',
					rules: ['require', 'min:6'],
					errorMsg: {
						require: '请输入交易密码',
						min: '交易密码最少6位'
					}
				}]
				let check = validate.check(this.form, rule);
				if (!check) {
					// 获取错误信息
					let err = validate.getError();
					uni.$u.toast(err[0])
					return
				}
				_this.form.step = 2
				_this.get_confirm()
			},
			//获取订单生成初始数据
			async get_confirm() {
				if (_this.form.step == 2) {
					_this.btnDisabled = true
					setTimeout(() => {
						_this.btnDisabled = false
						_this.showPaypwd = false
					}, 2000)
				}
				const data = await _this.$post('api/add_foster_order', _this.form)
				if (data.code == 100) {
					uni.$u.toast(data.msg)
					setTimeout(() => {
						uni.navigateBack({})
					}, 2000)
				} else if (data.code == -100) {
					uni.$u.toast(data.msg)
					setTimeout(() => {
						uni.$u.route({
							url: 'pages/center/paypwd',
							type: 'redirectTo'
						})
					}, 2000)
				} else if (data.code == 200) {
					uni.$u.toast(data.msg)
					setTimeout(() => {
						uni.$u.route({
							url: 'pages/foster/foster-order-list',
							type: 'redirectTo',
							params: {
								currentIndex: 1
							}
						})
					}, 2000)
				} else if (data.code == 30) {
					//唤起支付 wxpay alipay
					uni.requestPayment({
						provider: data.data.pay_code,
						orderInfo: data.data.result,
						success(res) {
							_this.$u.toast('支付成功')
							setTimeout(() => {
								uni.$u.route({
									url: 'pages/foster/foster-order-list',
									type: 'redirectTo',
									params: {
										currentIndex: 1
									}
								})
							}, 2000)
						},
						fail(err) {
							_this.$u.toast('支付失败')
							setTimeout(() => {
								uni.$u.route({
									url: 'pages/foster/foster-order-list',
									type: 'redirectTo'
								})
							}, 2000)
							console.log('fail:' + JSON.stringify(err));
						}
					});
				} else if (data.code === 50) {
					console.info(data)
					try {
						await payment(data)

						this.nextStep(true)
					} catch (e) {
						this.nextStep(false)
					}
				} else if (data.code == 10) {
					this.goods = data.data.goods
					this.pay_list = data.data.pay_list
					this.form.pay_code = this.pay_list[0]['code']
				} else {
					uni.$u.toast(data.msg)
				}
			},
			//生成订单前判断支付
			async zhifu(option) {
				if (!_this.xieyi) {
					uni.$u.toast('请阅读并同意认养协议')
					return
				}
				let openid = uni.getStorageSync('openid') || 'o4RE35WBIPcCtRZDphyMwBozNK80'
				const params = {
					action: option.action || '',
					id: option.id || 0,
					num: _this.goods_num || 1,
					pay_code: _this.pay_code,
					user_note: _this.user_note,
					address_id: _this.address_id,
					openid,
					act: 'yes'
				}
				const data = await PayBorder(params)
				console.info({
					data
				})
				if (data.code == 100) {
					uni.$u.toast(data.msg)
					setTimeout(() => {
						uni.navigateBack({})
					}, 2000)
				} else if (data.code == 200) {
					uni.$u.toast(data.msg)
					setTimeout(() => {
						uni.$u.route({
							url: 'pages/foster/foster-order-list',
							type: 'redirectTo',
							params: {
								currentIndex: 1
							}
						})
					}, 2000)
				} else if (data.code == 30) {
					uni.requestPayment({
						provider: 'wxpay',
						timeStamp: data.data.timeStamp + '',
						nonceStr: data.data.nonceStr,
						package: data.data.package,
						signType: data.data.signType,
						paySign: data.data.sign,
						success: function(res) {
							console.log('success:' + JSON.stringify(res));
							this.nextStep(true)
						},
						fail: function(err) {
							console.log('fail:' + JSON.stringify(err));
							this.nextStep(false)
						}
					});
				} else {
					uni.$u.toast(data.msg)
				}
			},
			nextStep(isSuccess = true) {
				if (isSuccess) {
					_this.$u.toast('支付成功')
					setTimeout(res => {
						uni.$u.route({
							url: 'pages/foster/foster-order-list',
							type: 'redirectTo',
							params: {
								currentIndex: 1
							}
						})
					}, 2000)
				} else {
					uni.$u.toast('支付失败')
					setTimeout(res => {
						uni.$u.route({
							url: 'pages/foster/foster-order-list',
							type: 'redirectTo',
							params: {
								currentIndex: 1
							}
						})
					}, 2000)
				}
			}
		},
		onLoad(e) {
			_this = this;
			if (e.id) {
				_this.form.goods_id = e.id
			}
			this.get_confirm()
			this.officialConfig()
		},
		computed: {
			amount: {
				cache: false,
				get() {
					if (!_this.goods) {
						return 0.0
					}
					let amount = _this.goods.goods_price * _this.form.goods_num
					return amount.toFixed(2)
				}
			},
			showMima: {
				cache: false,
				get() {
					let arr = ['money', 'mcbt']
					return arr.includes(_this.form.pay_code)
				}
			},
		},
		onShow() {

		},
		components: {}
	}
</script>

<style lang="scss" scoped>
	@import "@/static/css/order.scss";

	.confirm-order-bot {
		height: 150rpx;

		.xieyi {
			display: flex;
			align-items: center;
			margin-top: 10rpx;

			image {
				width: 40rpx;
			}

			text:nth-child(2) {
				color: #37BB49;
			}
		}
	}

	/deep/ .keyboard-content {
		z-index: 99999999999
	}
</style>